// 获取分页器中的元素
let btnBox = document.querySelector('.btn-box');
let currentPageElement = document.querySelector('.currentPage span[data-count]');

let itemsPerPage = 6;
let currentPage = 1;
let totalCount = caseDataList.length;

// 初始化渲染
renderPagination();
renderContent();

// 渲染分页按钮
function renderPagination() {
    btnBox.innerHTML = ''; // 清空现有的按钮
    let pageCount = Math.ceil(totalCount / itemsPerPage);

    for (let i = 1; i <= pageCount; i++) {
        let btn = document.createElement('span');
        btn.className = 'btn';
        btn.textContent = i;
        btn.setAttribute('data-index', i);
        btnBox.appendChild(btn);
    }

    // 高亮当前页码
    document.querySelectorAll('.btn').forEach(btn => {
        btn.classList.toggle('on', parseInt(btn.getAttribute('data-index')) === currentPage);
    });
}

// 点击分页按钮
btnBox.addEventListener('click', (e) => {
    if (e.target.classList.contains('btn')) {
        currentPage = parseInt(e.target.getAttribute('data-index'));
        renderContent();
        renderPagination();
        currentPageElement.setAttribute('data-count', totalCount);
    }
});

// 渲染内容
function renderContent() {
    let start = (currentPage - 1) * itemsPerPage;
    let end = start + itemsPerPage;
    let visibleData = caseDataList.slice(start, end);

    // 清空现有内容
    let casesList = document.querySelector('.casesList');
    casesList.innerHTML = '';

    // 渲染新内容
    visibleData.forEach(caseData => {
        let caseItem = document.createElement('div');
        caseItem.className = 'casesItem';
        caseItem.onclick = function () {
            // 跳转到详情页面并传递当前点击的数据ID
            window.location.href = `casesDetails.html?id=${caseData.id}`;
        };
        let imgDiv = document.createElement('div');
        imgDiv.className = 'img';
        imgDiv.style.backgroundImage = `url(./assets/${caseData.imgUrl})`;
        let titDiv = document.createElement('div');
        titDiv.className = 'tit';
        titDiv.textContent = caseData.title;
        caseItem.appendChild(imgDiv);
        caseItem.appendChild(titDiv);
        casesList.appendChild(caseItem);
    });


    // /**
    //  * 客户案例列表添加动画效果
    //  * @type {Element}
    //  */
    // let element = document.querySelector('#casesList');
    // Array.prototype.forEach.call(element.children, (item) => {
    //     console.log(item);
    //     // item.addEventListener('mousemove', (e) => {
    //             // console.log(e.target);
    //             // console.dir(e.target);
    //         //     // // 移除所有子元素的 'on' 类
    //         //     // Array.prototype.forEach.call(element.children, (item) => {
    //         //     //     item.classList.remove('on');
    //         //     //     console.log(1);
    //         //     // });
    //         //     //
    //         //     // // 为鼠标指向的子元素添加 'on' 类
    //         //     // if (e.target === element) { // 确保事件目标是 casesList 的直接子元素
    //         //     //     e.target.classList.add('on');
    //         //     // }
    //         // })
    // });
}

